<template>
	<view :class="[`${PREFIX}`]" :style="{
		background: disabled ? disabledBg : bg,
		height: `${height}px`,
		borderRadius: `${height/2}px`,
		color: color
	}" @click="btnClick">{{text}}</view>
</template>

<script>
	const PREFIX = 'constom-btn'
	export default {
		data() {
			return {
				PREFIX
			}
		},
		props: {
			color: {
				text: {
					type: String,
					default: '#fff'
				},
			},
			text: {
				type: String,
				default: '按钮'
			},
			height: {
				type: String,
				default: '44'
			},
			bg: {
				type: String,
				default: '#7355ff'
			},
			disabledBg: {
				type: String,
				default: '#7355ff'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			btnClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="less">
	.constom-btn {
		width: 100%;
		// width: 303px;
		// height: 44px;
		display: flex;
		justify-content: center;
		align-items: center;
		// opacity: 1;
		// background: #7355ff;
		// border-radius: 22px;
		color: #fff;
		font-size: 17px;
		// padding: 0;
		// position: fixed;
		// bottom: 20px;
		// left: 50%;
		// transform: translateX(-50%);
	}
</style>